<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body,
    html {
      height: 100%;
      overflow: hidden;
      background: black;
      text-align: center;
    }
    h1 {
      display: inline-block;
      margin-top: 50px;
      color: rgba(255, 255, 255, 0.3);
      font: bold 80px "微软雅黑";
      background: linear-gradient(
          120deg,
          rgba(255, 255, 255, 0) 100px,
          rgba(255, 255, 255, 1) 180px,
          rgba(255, 255, 255, 0) 260px
        ),
        no-repeat;
      -webkit-background-clip: text;
    }
  </style>
  <body>
    <h1>日出而作，日入而息。</h1>
  </body>
  <script>
    var h1 = document.querySelector("h1");
    var flag = -160;
    setInterval(function () {
      flag = flag + 10;
      h1.style.backgroundPosition = flag + "px";
      if (flag == 600) {
        flag = -160;
      }
    }, 30);
  </script>
</html>
